<!--19-DOM-getElementById.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script getElementById="text/javascript" >
        /*
        * 需求：当用户点击了较验按钮，要获取输出框中的内容。然后验证其是否合法。<br/>
        * 验证的规则是：必须由字母，数字。下划线组成。并且长度是5到12位。
        * */
        function onclickFun() {
            // 1 当我们要操作一个标签的时候，一定要先获取这个标签对象。
            var usernameObj = document.getElementById("username");
            //  获取文本的内容， value 属性
            var usernameText = usernameObj.value;
            // 正则表达式校验： 字母，数字。下划线组成，并且长度是5到12位
            var patt = /^\w{5,12}$/;
            /*
            *  test()方法用于测试某个字符串，是不是匹配 patt 定义的规则 ，
            *  匹配就返回true。不匹配就返回false.
            */
            if (patt.test(usernameText)) {
                alert("用户名合法！");
            } else {
                alert("用户名不合法！");
            }
        }
    </script>
</head>
<body>
    用户名：<input type="text" id="username" value="wzg"/>
    <button onclick="onclickFun();">较验</button>
</body>
</html>